<template>
  <div class="modal-wrapper" :class="{ visible: isModalVisibleTransition }">
    <div class="modal">
      <h2>关于：</h2>
      <p>这个应用可以用来追踪你选择城市的当前天气</p>
      <h2>如何使用：</h2>
      <p>
        1.点击搜索框输入你希望追踪的城市<br />
        2.在搜索结果中选中一个城市，你将获取当地最新的天气<br />
        3.点击右侧的＋号可以将追踪城市的天气情况保存在首页
      </p>
      <h2>移除城市：</h2>
      <p>如果你不想在首页关注某个城市,可以通过底部的按钮删<br />除它</p>
      <button @click="handleClick">关闭</button>
    </div>
  </div>
</template>

<script setup>
import { storeToRefs } from 'pinia';

import { useWeatherStore } from '@/stores/weatherStore.js';

const { isModalVisible, isModalVisibleTransition } = storeToRefs(useWeatherStore());

//使用定时器给过渡效果添加延迟
if (isModalVisible) {
  setTimeout(() => {
    isModalVisibleTransition.value = true;
  }, 100);
}

//使用定时器给过渡效果添加延迟
const handleClick = () => {
  isModalVisibleTransition.value = false;
  setTimeout(() => {
    isModalVisible.value = false;
  }, 1000);
};
</script>

<style lang="scss" scoped>
.modal-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  width: 100%;
  height: 100vh;
  padding-left: 2rem;
  padding-right: 2rem;
  background: #0000004d;
  color: #000;
  z-index: 20;
  opacity: 0;
  transition: opacity 1s;
  &.visible {
    opacity: 1;
  }
  .modal {
    align-self: flex-start;
    max-width: 768px;
    background: #fff;
    padding: 1rem;
    margin-top: 7.5rem;
    h2 {
      line-height: 24px;
    }
    p {
      font-size: 0.75rem;
      line-height: 1rem;
      margin: 0;
      margin-bottom: 1rem;
    }
    button {
      background: #00668a;
      padding-left: 1.5rem;
      padding-right: 1.5rem;
      padding-top: 0.5rem;
      padding-bottom: 0.5rem;
      margin-top: 1.5rem;
      color: #fff;
      font-size: 0.75rem;
      line-height: 1rem;
      border: none;
      cursor: pointer;
    }
  }
}
</style>
